<template>
  <div>
    <h2>结算页面</h2>
    <div class="table">
    <el-table :data="selectedProducts" border>
      <el-table-column prop="goodsId" label="商品编号"></el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="detail" label="商品描述"></el-table-column>
      <el-table-column prop="unit" label="商品单位"></el-table-column>
      <el-table-column prop="price" label="单价"></el-table-column>
      <el-table-column prop="amount" label="数量"></el-table-column>
      <el-table-column label="小计">
        <template slot-scope="scope">{{ scope.row.price * scope.row.amount }}</template>
      </el-table-column>
    </el-table>
    </div>

    <div class="address" style="text-align: right;">
      <div class="total" style="margin-top: 20px;">
        <p>合计件数: <span class="total-quantity">{{ totalSelectedQuantity }}</span></p>
        <p>合计金额: <span class="total-price">{{ totalPrice }}</span></p>
      </div>

      <el-row style="margin-top: 20px;">
         <!-- 打开抽屉的按钮 -->
        <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">选择收货地址</el-button>
        <!-- 用于选择地址的抽屉组件 -->
        <el-drawer title="选择收货地址" :direction="direction" :visible.sync="drawer" :with-header="false">
          <!-- 地址选择列表 -->
          <div class="address-container">
            <div v-for="address in addresses" :key="address.merchantId" class="address-item">
              <el-radio v-model="selectedAddress" :label="address.merchantId" size="large">{{ address.address }}{{ address.detailAddress }}</el-radio>
            </div>
          </div>
          <!-- 用于确认地址选择的按钮 -->
          <div class="confirm-button-container">
            <el-button @click="confirmAddress" type="primary">确认</el-button>
          </div>
        </el-drawer>&nbsp;
        <el-button type="success" @click="submitOrder()">结算</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        //用户ID
        sysUsersId: '',
        drawer: false,
        direction: 'ltr',
        addresses: [],
        selectedAddress: null
      }
    },
    methods: {
      //查询收货地址
      async selAddressList(){
        const {data: res} = await this.$http.post(`/merchantInfo/selAddressList`)
        this.addresses=res
        console.log(res)
      },
      // 处理确认地址选择的方法
      async confirmAddress() {
        if (this.selectedAddress) {
          //选择地址后关闭抽屉
          this.drawer = false;
        } else {
          alert("请选择一个地址！");
        }
      },
      async submitOrder() {
        if (this.selectedAddress) {
          /*alert("您选择的收货地址是:"+this.selectedAddress);
          console.log(this.selectedAddress);*/
          const orderData = {
            orderDetailsList: this.selectedProducts,
            orderInfo: {
              merchantId: this.selectedAddress,
              totalAmount: this.totalSelectedQuantity,
              totalPrice: this.totalPrice,
              sysUsersId:this.$store.state.user.sysUsersId
            },
          };
          console.log('222',orderData)
            // 调用后端接口来提交订单数据
            const {data: res} = await this.$http.post('/orderInfo/createOrder', orderData);
          this.$message.success(res)
          this.$router.push("/ShoppingTrolley")

        } else {
          this.$message.info("请选择一个收货地址！")
        }
      },
    },
    props: {
      selectedProducts: {
        type: Array,
        required: true
      },
      totalSelectedQuantity: {
        type: Number,
        required: true
      },
      totalPrice: {
        type: Number,
        required: true
      }
    },
  created() {
    this.selAddressList();
  }
}
</script>

<style>
/* 在CSS中定义对应的样式类 */
.address {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 20px;
}
.address button:hover {
  background-color: #4CAF50;
  color: #fff;
}

.address-container {
  display: flex; /* 使用Flexbox布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: flex-start; /* 左对齐 */
}

.confirm-button-container {
  margin-top: 20px;
}

.address-item {
  margin-bottom: 10px;
  font-size: 35px; /* 设置地址字体大小 */
}

.confirm-button-container {
  position: absolute;
  bottom: 30px;
  right: 20px;
}

/* 在CSS中定义对应的样式类 */
.total {
  font-size: 18px;
  margin-top: 20px;
}

.total-quantity {
  color: #ff9900; /* 设置合计件数的文字颜色 */
}

.total-price {
  color: #0099ff; /* 设置合计金额的文字颜色 */
}
</style>